<template>
  <div style="position: relative">
    <el-select v-model="dataForm[attrName]"
               :filter-method="filterList"
               :allow-create="createAble"
               :disabled="disabled"
               :filterable="filterable"
               :clearable="clearable"
               :placeholder="placeholder" :multiple="selectMultiple" @change="selectCallback" @input="forceUpdate">
      <el-option v-for="item in listForDisplay" :key="item.id" :label="item.name" :value="item.id">
        <template v-if="otherInfo">
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right; color: #a567a6; font-size: 13px">{{ otherInfo.label }}{{
              item[otherInfo.attrName]
            }}</span>
        </template>
      </el-option>
    </el-select>
    <el-tooltip v-if="isNeedAdd" class="item" effect="dark" content="新增" placement="bottom">
      <a class="el-icon-circle-plus-outline" @click="addNewItemFunc"
         style="position: absolute;margin-left: 5px; top: 10px;"></a>
    </el-tooltip>
    <el-tooltip v-if="isNeedLook" class="item" effect="dark" content="查看" placement="bottom">
      <a class="el-icon-view"  @click="lookItemInfoFunc"
         style="position: absolute;margin-left: 25px; top: 10px;"></a>
    </el-tooltip>
  </div>
</template>

<script>
import basicMixins from './basicMixins'

export default {
  name: 'normalSelect',
  mixins: [basicMixins],
  data() {
    return {
      maxShowNumber: 100,
      listForDisplay: []
    }
  },
  computed: {
    selectValue() {
      return this.dataForm[this.attrName]
    }
  },
  watch: {
    selectValue: {
      handler() {
        this.ensureValueInDisplayList()
      }
    },
    list: {
      handler() {
        if (this.list.length > this.maxShowNumber) {
          this.listForDisplay = this.list.slice(0, this.maxShowNumber)
        } else {
          this.listForDisplay = this.list
        }
        this.ensureValueInDisplayList()
      },
      deep: true
    }
  },
  props: {
    createAble: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    selectMultiple: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: false
    },
    selectCallback: {
      type: Function,
      default: () => {
      }
    },
    clearable: {
      type: Boolean,
      default: true
    },
    list: {
      type: Array,
      required: true,
      default: () => []
    },
    otherInfo: {
      default: () => null
    },
    isNeedAdd: {
      default: false
    },
    addNewItemFunc: {
      default: () => {
      }
    },
    isNeedLook:{
      default: false
    },
    lookItemInfoFunc: {
      default: () => {
      }
    }
  },
  methods: {
    ensureValueInDisplayList() {
      const selectItem = this.R.head(this.list.filter(this.R.propEq('id', this.selectValue)))

      if (this.R.isNil(selectItem)) {
        return
      }
      const isInDisplay = this.listForDisplay.filter(this.R.propEq('id', this.selectValue)).length > 0

      if (isInDisplay) {
        return
      }
      this.listForDisplay.splice(0, 0, selectItem)
    },
    filterList(query = '') {
      const arr = this.list.filter(item => {
        return item.name.toLowerCase().includes(query.toLowerCase())
      })

      if (arr.length > this.maxShowNumber) {
        this.listForDisplay = arr.slice(0, this.maxShowNumber)
      } else {
        this.listForDisplay = arr
      }
    }
  }
}
</script>

<style scoped>

</style>
